<template>
  <div>
     <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- <span>分组管理</span>
        <el-button type="primary" style="float: right;
    padding: 5px 10px;
    position: relative;
    top: -5px;" @click="dialogVisible = true">新增<i class="el-icon-plus el-icon--right"></i>
        </el-button> -->
        <el-row>
          <el-col :span="8">
             <el-input
              class="mt-1 mb-1"
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              clearable
              v-model="searchInput">
            </el-input>
          </el-col>
          <el-col :span="2"><el-button plain style="position:relative;top:3px" @click="getMainData(index,count)">查询</el-button></el-col>
           <el-col :span="2" :offset="12">
             <el-button type="primary" @click="dialogVisible = true">新增<i class="el-icon-plus el-icon--right"></i></el-button>
          </el-col>
        </el-row>
       
      </div>
      
      <div>
        <el-table
          ref="multipleTable"
          :data="realData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>

          <el-table-column
            label="名称">
            <template slot-scope="scope">{{ scope.row.FZMC }}</template>
          </el-table-column>

         
           <el-table-column
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="text" size="small">添加加盟商</el-button>
              <el-button @click="handledelete(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block mt-3">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="count"
            layout="prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

      </div>

      

    </el-card>

    <!-- 添加结盟商的弹出界面 -->
    <el-dialog
      title="分组新增"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
       <div class="add">
      <el-form :label-position="labelPosition" label-width="90px" :model="formLabelAlign">

         <el-form-item label="名称">
          <el-input v-model="formLabelAlign.username" placeholder="请输入名称"></el-input>
          <div class="tip usernameTip"></div>
        </el-form-item>

      </el-form>
    </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false;handleCancle()">取 消</el-button>
        <el-button type="primary" @click="franchiseesAdd()">确 定</el-button>
      </span>
    </el-dialog>

 </div>
</template>


<script>
  export default {
    data() {
      return {
        realData:[],
        multipleSelection: [],
        //添加界面弹出层参数 
        dialogVisible: false,
        //添加用户参数
        labelPosition: 'left',
        formLabelAlign: {
          phone: '',
          username: '',
          password: '',
          address:'',
          indroduce:''
        },
        uid:'',  // 存储在本地的uid
        objid:'', //存在则为修改，为空则为保存
        searchInput:'',//查询
        currentPage3: 1,//当前页面，默认初始化为1
        total:100,    //分页总数
        index:0,  //自定义获取数据参数
        count:5,  // 分页长度（每页展示的数据数量）   
      }
    },

    methods: {
      /* 分页 */
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.getMainData((val-1)*this.count,this.count)
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 查看
      handleClick(row){
        // console.log(row);
        this.lookData = row
        this.dialogVisible_look = true
      },
      //分组信息编辑
      handleEdit(row){
        console.log(row);
        this.$router.push({name:'groupAdd',params:{row:row}});
      },
      check(val){
        // console.log(val);
        var data = this.formLabelAlign
        if(val=='phone'){
          console.log(data.phone);
           if(data.phone==''||data.phone=='undefined'){
             $(".phoneTip").html("手机号不能为空")
           }else{
             $(".phoneTip").html("")
           }         
        }else if(val=='password'){
          console.log(data.password);
           if(data.password==''||data.password=='undefined'){
             $(".passwordTip").html("密码不能为空")
           }else{
             $(".passwordTip").html("")
           }         
        }else if(val=='username'){
          console.log(data.username);
           if(data.username==''||data.username=='undefined'){
               $(".usernameTip").html("名称不能为空")
           }else{
             var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》+-/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]");
          　　if (pattern.test(data.username)){
                 console.log('1');
                 $(".usernameTip").html("名称不能含有特殊字符")
          　　　　return true;
          　　}
              console.log('2');
              $(".usernameTip").html("")
           }         
        }else if(val=='indroduce'){
          console.log(data.indroduce);
           if(data.indroduce==''||data.indroduce=='undefined'){
             $(".indroduceTip").html("介绍不能为空")
           }else{
             $(".indroduceTip").html("")
           }         
        }else if(val=='address'){
          console.log(data.address);
           if(data.address==''||data.address=='undefined'){
             $(".addressTip").html("地址不能为空")
           }else{
             $(".addressTip").html("")
           }         
        }

      },
      check2(val){
        // console.log(val);
        var data = this.editData
        if(val=='SJHM'){
          console.log(data.SJHM);
           if(data.SJHM==''||data.SJHM=='undefined'){
             $(".SJHMTip").html("手机号不能为空")
           }else{
             $(".SJHMTip").html("")
           }         
        }else if(val=='XSMC'){
          console.log(data.XSMC);
           if(data.XSMC==''||data.XSMC=='undefined'){
               $(".XSMCTip").html("名称不能为空")
           }else{
             var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》+-/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]");
          　　if (pattern.test(data.XSMC)){
                 console.log('1');
                 $(".XSMCTip").html("名称不能含有特殊字符")
          　　　　return true;
          　　}
              console.log('2');
              $(".XSMCTip").html("")
           }         
        }

      },
      //input获取焦点隐藏错误提示
      hideTip(val){
        if(val=='phone'){
          $('.phoneTip').html('')
        }else if(val=='username'){
          $('.usernameTip').html('')
        }else if(val=='SJHM'){
          $('.SJHMTip').html('')
        }else if(val=='XSMC'){
          $('.XSMCTip').html('')
        }
      },


      /* 分组新增 */
      async franchiseesAdd(row){

          var data = this.formLabelAlign 

          if(data.username==''||data.username=='undefined'){
            this.$message({
              message: '用户名不为空',
              type: 'success',
              duration:1000
            });
            return
          }

          var that = this
          var data =  that.formLabelAlign
          var params = {}
          params.ACTIONNAME = 'saveJMSFz';

          params.uid = that.uid;
          if(that.objid!=''){
            params.objid = that.objid
          }
          params.FZMC = data.username;

          that.$get(params).then(res => {
            console.log(res)
            if(res.SUCCESS){
              that.$message({
                message: res.MSG,
                type: 'success',
                duration:1000
              });
              that.getMainData(that.index,that.count)
              that.clearFormAddData()
              that.dialogVisible = false
            }else{
              that.$message({
                message: res.MSG,
                type: 'warning',
                duration:1000
              });
            }
            /*  */
          })
        
      },
      //添加结盟商成功后 或 取消添加时  =>  清空form数据 
      clearFormAddData(){
        var that = this
        that.formLabelAlign.username=''
      },


      /* 弹出层关闭前  （X号关闭）*/
      handleClose(done) {
        done();
        this.clearFormAddData()
      },
      handleCancle(){
       this.clearFormAddData()
      },
      
      handledelete(row){
        var that = this
        console.log(row);
        that.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var params = {}
          params.ACTIONNAME = 'delJMSFz';

          params.uid = that.uid;
          params.objid = row.OBJID;
          
          this.$get(params).then(res => {
            if(res.SUCCESS){
                that.$message({
                message: res.MSG,
                type: 'success',
                duration:1000
              });
                that.getMainData(that.index,that.count)
            }else{
              that.$message({
                message: res.MSG,
                type: 'warning',
                duration:1000
              });
            }
          })
        })
        
      },
      /* 获取主数据，第一次进入页面加载的数据 */
      async getMainData(index,count){
        
        var params = {}
        params.ACTIONNAME = 'getJMSFzList';
        params.index = index;
        params.count = count;
        if(this.searchInput!==''){
          params.keywords = this.searchInput;
        }
        this.$get(params).then(res => {
          // window.console.log(res)
          console.log(res)
           if(res.SUCCESS){
            this.realData = res.DATA.LIST
            this.total = res.DATA.TOTAL;
           }
        })
      },
    },
    created(){
      this.uid = localStorage.uid
      this.getMainData(this.index,this.count)
    }
  }
</script>

<style scoped>
 .text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.el-table{
  width: 600px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
/* 头像 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avatar-uploader-icon[data-v-3f78ccf2] {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px solid #DCDFE6;
}

.el-form-item{
  position: relative;
}
.tip{
    color: #9d0b0b;
    position: absolute;
    right: 1%;
    top: 0;
}

.el-row {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 20px 0;
}

</style>